<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监控启动控制</title>
<link rel="stylesheet" type="text/css" href="video-js.7.5.5.min.css">
<style type="text/css">
  *{ box-sizing: border-box; }
  table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  table td:nth-child(4){
    text-align: center;
  }
  tr.active{ background: #eee; }
  button.work{ background: green; color: #fff; }
  button.nowork{ background: orange; color: #fff; }
  .error{ color: red; }
  #commit{ float: right; }

  .box{
    width: 900px;
    margin:0 auto;
    overflow-y: auto;
  }
  input{ font-size: 14px; padding:2px; }
  .mark{
    position: fixed;
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 99;
    background: rgba(0,0,0,0.7);
    display: none;
  }
  .mark>div{
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    width: 300px;
    height: 100px;
    background: #fff;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 0 5px #fff;
    padding-top:30px;
  }
</style>
</head>
<body>
<div class="box" style="max-height: 600px;">
  地址：<input type="" name="" id="url" style="width: 420px">
  名称：<input type="" name="" id="name" style="width: 100px">
  key：<input type="" name="" id="key" style="width: 80px">
  <button id="add">添加/确认</button>
  <button id="commit">启动设置</button>
  <br>
  <br>
  <table border="1">
    <tr>
      <th>名称</th>
      <th>地址</th>
      <th>key</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>名称</td>
      <td>地址</td>
      <td>key</td>
      <td>
        <button class="">修改</button>
        <button class="">删除</button>
        <button class="">停用</button>
      </td>    
    </tr>
  </table>
</div>
<div class="box">
  <div id="info" class="box" style="font-size: 12px;background: #f2f2f2;padding:5px;">
  点击“查看”按钮后可在这里显示推流报错信息
  </div>
  <br>
  <b>说明</b><br>
  在表格“操作”栏配置好相关信息后，点击右上角“开启设置”启动拉流推流服务。<br>
  开启拉流推流服务大约需要15s左右，开启失败的rtsp流地址会标红，并显示“已停用”。<br>
  注：不被flv支持的新格式视频需要选中“转码”项，否则不能正常播放。(选中此项非常耗性能，不能超过5个)<br>
  <br>
  视频地址前缀：http://localhost:2000/hls/<br>
  例如：如果key值为a, 则对应播放地址为 http://localhost:2000/hls/a.m3u8<br>
  网络延迟约10秒左右，具体设置可以在原代码中增改。
  <br>
  <br>
  <input type="" id="playUrl" value="http://localhost:2000/hls/a.m3u8" style="width: 850px;">
  <button id="playHls">播放</button>
  <br>
  <br>
  <video id="myvideo" class="video-js vjs-big-play-centered"></video>
</div>


<div class="mark">
  <div>
  配置提交成功！正在启动推流服务！<br>
  <b id="jsnum">1</b>
  </div>
</div>

<script src="jquery-2.2.4.min.js"></script>
<script src="video-js.7.5.5.min.js"></script>
<script>
  var myPlayer = null;
  $("#playHls").click(function(){
    if(myPlayer == null){
      myPlayer = videojs('myvideo',{
        width:900,
        autoplay:true,
        preload:'auto',
        sources:[{
          src: $.trim($("#playUrl").val()),
          type: 'application/x-mpegURL'
        }]
      })        
    }else{
      myPlayer.src($.trim($("#playUrl").val()));   /*动态设置video.js播放的地址。*/
      myPlayer.autoplay();
      //myPlayer.dispose() //销毁
      // myPlayer.play();
    }
  })
</script>
<script>
var json = [];      //总数据
var index = null;   //当前操作的数据
var isAll = false;

function resetHtml(json){
  var html = `
    <tr>
      <th>名称</th>
      <th>地址</th>
      <th>key</th>
      <th style="width:250px;">操作<button id="allToggle">全选切换</button></th>
    </tr>
  `;
  json.forEach(function(v){
    html += `
      <tr>
        <td>${v.name}</td>
        <td class="${!v.iswork?'error':''}">${v.url}</td>
        <td>${v.key}</td>
        <td>
          <button class="editor">修改</button>
          <button class="delete">删除</button>
          <button class="transcoding ${v.isTC?'work':''}">转码</button>
          <button class="toggleWork ${v.iswork?'work':'nowork'}">${v.iswork?'启用':'停用'}</button>
          <button class="disc">查看</button>
        </td>  
      </tr>
    `
  })
  $('table').html(html)
}

$.ajax({
  url:'data.json',
  success:function(res){
    json = res || [];
    resetHtml(json);
  }
})

//添加/确认 按钮
$("#add").click(function(){
  var url = $.trim($("#url").val());
  var name = $.trim($("#name").val());
  var key = $.trim($("#key").val());
  
  if(url!='' && name!='' && key!=''){
    if(index == null){
      json.push({
        name:name,
        url:url,
        key:key,
        iswork:true        
      })
    }else{
      json[index].name = name;
      json[index].url = url;
      json[index].key = key;      
    }
  }else{
    alert('请输入完整信息!')
  }
  resetHtml(json)
  $("#url").val('');
  $("#name").val('');
  $("#key").val('');
  index = null;
})

//编辑按钮
$('table').on('click','.editor',function(){
  $("tr.active").removeClass('active');
  var tr = $(this).parents('tr').addClass('active');
  index = tr.index()-1;
  $("#url").val(json[index].url);
  $("#name").val(json[index].name);
  $("#key").val(json[index].key);  
})

//删除按钮
$('table').on('click','.delete',function(){
  var tr = $(this).parents('tr');
  index = tr.index()-1;
  json.splice(index,1);
  resetHtml(json);
})

//转码
$('table').on('click','.transcoding',function(){
  var tr = $(this).parents('tr');
  index = tr.index()-1;
  json[index].isTC= !json[index].isTC;
  resetHtml(json);
})

//启用按钮
$('table').on('click','.toggleWork',function(){
  var tr = $(this).parents('tr');
  index = tr.index()-1;
  json[index].iswork = !json[index].iswork;
  resetHtml(json);
})

//查看详情
$('table').on('click','.disc',function(){
  var tr = $(this).parents('tr');
  index = tr.index()-1;
  $("#info").html(json[index].error || '没有异常信息！')
})

//更新配置
$("#commit").click(function(){
  $.ajax({
    url:'/commit',
    type:'post',
    dataType:'json',
    data: JSON.stringify(json),
    success:function(res){
      if(res.code==1){
        $('.mark').fadeIn()
        submitTip();        
      }else{
        alert('出现错误')
      }
    },
    error:function(er){
      alert(er)
    }
  })
})

$(document).on('click','#allToggle',function(){
  json.forEach(function(v){
    v.iswork = isAll
  })
  isAll = !isAll
  resetHtml(json);
})

var tip = 15;
var tipTimer = null;
function submitTip(){
  $("#jsnum").html(tip)
  tipTimer=setInterval(function(){
    tip --;
    if(tip<0){
      clearInterval(tipTimer);
      location.reload(true);
      tip=15;
      return false;
    }
    $("#jsnum").html(tip)
  },1000)
}

</script>
</body>
</html>
